<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script  src="../js/vue.js"></script>
<script  src="../js/vue-router.js"></script>    
<script  src="../js/jquery.min.js"></script>
</head>

<body>
   <div id="app">
        <router-link to="/one">One</router-link>
    <router-link to="/two">Two</router-link>
	<router-view></router-view>
   </div>

<template id="tempa">
   <div>
        第一个router
    </div>
</template>

<template id="tempb">
   <div>
        第二个router
	 <router-view>
                
        </router-view>
    </div>
</template>

<template id="tempc">
    <div>
        user:{{ $route.params.id }}
    </div>
</template>



<script>
var routes = [
    {
        path:"/one",

        component:{template:"#tempa"}
    },
    {
        path:"/two",
        component:{template:"#tempb"},
		children:[{
		path:":id",
		component:{template:'#tempc'}
		}]
    },
];

// 定义路由组件
var router = new VueRouter({
    routes
});

// 定义路由
new Vue({
    el:"#app",
    router
});
</script>

</body>


</html>